<template>
	<view class="container" style="height: 100%;">
		<view class="cate-zone">
			<scroll-view class="srolly-y-left" :scroll-y="true">
				<view class="srollyLeftItem active">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
				<view class="srollyLeftItem">左侧</view>
			</scroll-view>
			
			<scroll-view class="srolly-y-right" :scroll-y="true">
				<view v-for="index in 80">右侧{{index}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
.container {
	.cate-zone{
		display: flex;
		.srolly-y-left{
			height: 100vh;
			width: 20%;
			.srollyLeftItem{
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 12px;
				position: relative;//相对定位：相对于自身所处位置
				// &.active{ //表示元素上同时有srollyLeftItem 和 active两个类名时，触发样式
				// 	background-color: #fff;
				// 	&::before{
				// 		content: '';//伪元素需要使用content占位才能显示出来！
				// 		display: block;
				// 		width: 3px;
				// 		height: 20px;
				// 		background-color: red;
				// 		position: absolute;//绝对定位 相对于最近的一个父级已定位元素来定位，若没有则以窗口来定位
				// 		top: 50%;//向下移动50%父元素高度
				// 		transform: translateY(-50%);
				// 	}
				// }
			}
			.srollyLeftItem.active{ //表示元素上同时有srollyLeftItem 和 active两个类名时，触发样式
				background-color: #fff;
			}
			.srollyLeftItem.active::before{
				content: '';//伪元素需要使用content占位才能显示出来！
				display: block;
				width: 3px;
				height: 20px;
				background-color: red;
				position: absolute;//绝对定位 相对于最近的一个父级已定位元素来定位，若没有则以窗口来定位
				top: 50%;//向下移动50%父元素高度
				transform: translateY(-50%);
			}
		}
		.srolly-y-right{
			height: 100vh;
			width: 80%;
		}
	}
}
</style>
